<template>
  <div class="main_container">
    <!--<p  @click="goBack">new page</p>-->
    <div class="main_menu">
      <p>眼疾病智能筛查与检测系统</p>

      <button class="image-upload" @click="upLoad" v-bind:class="{active:selected==2}">
        <span>批量眼底筛查</span>
        <form><input type="file" @change="onFileChange" multiple accept="image/*" ref="avatarInput"></form>
      </button>
      <router-link to="/main/history">
        <button @click="getHistory" v-bind:class="{active:selected==0}">查看筛查历史</button>
      </router-link>
      <router-link to="statistics">
        <button v-bind:class="{active:selected==1}" @click="getStatistics">查看统计数据</button>
      </router-link>
      <router-link :to="{name: 'history',query: {num:'delete'}, params: {user: 666}}">
        <button @click="clear" v-bind:class="{active:selected==3}">清空筛查列表</button>
      </router-link>
    </div>
    <router-view></router-view>
    <!--<transition name="drop">-->
    <dialogue :is-show="dialogueShow" @on-close="closeDialogue">
      <div class="delete_list_dialogue">
        <p class="title">确定删除列表？</p>
        <p>
          <button @click="confirm">确定</button>
          <button @click="cancel">取消</button>
        </p>
      </div>
    </dialogue>
    <!--</transition>-->
    <!--<div class="main_menu_items">-->
    <!--<p class="main_items">-->
    <!--<span class="two">图像</span>-->
    <!--<span class="one">病历号</span>-->
    <!--<span class="one">用户</span>-->
    <!--<span class="one">模式</span>-->
    <!--<span class="two">时间</span>-->
    <!--<span class="one">状态</span>-->
    <!--<span class="one">操作</span>-->
    <!--</p>-->

    <!--</div>-->
  </div>
</template>

<script>
  import event from './component/event'
  import dialogue from '../../components/dialogue'
  import axios from 'axios'
  import {apiPre} from "../../assets/js/config";

  // const apiPre = 'http://192.168.1.103:3001/';

  export default {
    name: "mainPage",
    components: {
      dialogue
    },
    data() {
      return {
        selected: 0,
        images: [],
        dialogueShow: false
      }
    },
    created() {
      // console.log(this.$route.path.split('/'))
      let len = this.$route.path.split('/').length;
      let path = this.$route.path.split('/')[len - 1];
      if (path == 'history') {
        this.selected = 0;
      } else {
        this.selected = 1;
      }
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      getHistory() {
        this.selected = 0;
        // alert('get history');
        // window.open('http://localhost:8080/#/detail');
      },
      getStatistics() {
        this.selected = 1;
      },
      clear() {
        this.dialogueShow = true;
        this.selected = 3;
        // event.$emit('clearItems');
        // this.historyItems = [];
        // this.$router.push({path: 'history',query: 332321321});
      },
      closeDialogue() {
        this.dialogueShow = false;
      },
      confirm() {
        // window.localStorage.setItem('storageItem', '');
        axios.delete(apiPre + 'getHistory').then((res) => {
          console.log('delete res', res);
        }).catch((err) => {
          console.log('delete err', err);
        })
        this.closeDialogue();
        event.$emit('clearItems');  //发送删除列表事件
      },
      cancel() {
        this.closeDialogue();
      },

      onFileChange(e) {
        var filearr = [];
        var files = e.target.files;
        for (var i = 0; i < files.length; i++) {
          filearr.push(files[i]);
        }
        var formData = new FormData();
        for (var i = 0; i < filearr.length; i++) {
          // console.log('filearr[i]', filearr[i]);
          formData.append("file", filearr[i]);
        }

        var config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }

        // console.log('formData', formData.getAll('file'));

        // axios.post(apiPre + 'upload', formData, config).then((res) => {
        //   console.log(res)
        // }).catch((err) => {
        //   console.log(err)
        // })

        this.createImage(files);
      },

      // onFileChange(e) {
      //   this.images = [];
      //   var files = e.target.files || e.dataTransfer.files;
      //   console.log('files', files);
      //   if (!files.length) return;
      //   this.createImage(files);
      // },
      createImage(file) {
        if (typeof FileReader == 'undefined') {
          alert('您的浏览器不支持图片上传，请升级您的浏览器');
          return false;
        }
        // var image = new Image();
        var vm = this;
        vm.images = [];
        var length = file.length;
        for (var i = 0; i < length; i++) {
          var reader = new FileReader();
          reader.readAsDataURL(file[i]);
          reader.onload = function (e) {
            // console.log('e.target.result', e.target.result);
            vm.images.push(e.target.result);
          }
        }
        setTimeout(() => {
          // console.log('vm.images', vm.images.length);
          let len = vm.images.length;
          let uploadData = [];
          for (var i = 0; i < len; i++) {
            let data = {
              leftSrc: this.images[i],
              rightSrc: '',
              userId: new Date().getTime() + i,
              // userName: 'test' + parseInt(Math.random() * 100000),
              userName: '',
              // id: 2,
              // type: this.images.length == 2 ? '双眼' : '单眼',
              type: 1,
              time: new Date().toLocaleString('chinese', {hour12: false}),
              percent: 0,
              status: 0
            }
            uploadData.push(data);
          }
          console.log('emit');
          event.$emit('upload', uploadData);
        }, 1000)
      },
      upLoad() {
        console.log('upload');
        this.selected = 2;
        this.$router.push('history');
      }
    }
  }
</script>

<style lang="scss">
  /*@import "../../style/common";*/
  @import "./main";

  .delete_list_dialogue {
    p {
      text-align: center;
      button {
        width: 120px;
        height: 40px;
        background-color: rgb(47, 161, 93)
      }
    }
    .title {
      margin: 10px;
    }
  }

  .drop-enter-active {
    transition: all .5s ease;
  }

  .drop-leave-active {
    transition: all .3s ease;
  }

  .drop-enter {
    transform: translateY(-500px);
  }

  .drop-leave-active {
    transform: translateY(-500px);
  }
</style>
